<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas id="myCanvas1" width="200" height="100" style="border:1px solid #c3c3c3;">
    渐变色
</canvas>
<canvas id="myCanvas2" width="200" height="100" style="border:1px solid #c3c3c3;">
    使用canvas画一个圆
</canvas>
<script type="text/javascript">

    var c=document.getElementById("myCanvas1");
    var cxt=c.getContext("2d");
    var grd=cxt.createLinearGradient(0,0,175,50);
    grd.addColorStop(0,"#FF0000");
    grd.addColorStop(1,"#00FF00");
    cxt.fillStyle=grd;
    cxt.fillRect(0,0,275,150);


    var c=document.getElementById("myCanvas2");
    var cxt=c.getContext("2d");
    cxt.fillStyle="#FF0000";
    cxt.beginPath();
    cxt.arc(70,18,15,0,Math.PI*2,true);
    cxt.closePath();
    cxt.fill();

</script>
</body>
</html>